import React, { useState } from "react";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import { Provider } from "react-redux";
import store from "../redux/store";
import { View, Text,ImageBackground } from "react-native";
import "../global.css";
import { useColorScheme } from "react-native";
import { Button } from '@rneui/base';
export default function RootLayout() {
  const [loaded, error] = useFonts({ ...FontAwesome.font });
  const colorScheme = useColorScheme();
  const [showWelcomeScreen, setShowWelcomeScreen] = useState(true); // 控制欢迎页显示

  if (error) throw error;

  if (!loaded) {
    return (
      <View className="flex-1 justify-center items-center">
        <Text className="text-base font-bold">字体加载中...</Text>
      </View>
    );
  }

  // 欢迎页逻辑
  if (showWelcomeScreen) {
    return (
      
      <View
        className={`flex-1 items-center ${
          colorScheme === "dark" ? "bg-black" : "bg-white"
        }`}
        style={{
          backgroundColor:'red',
        }}
      >
            <ImageBackground
             resizeMode="cover" // 背景图片按比例填充并覆盖整个区域
        source={require("../assets/images/treepic.jpg")} // 设置背景图片
        style={{
          flex: 1, // 让 ImageBackground 占满整个屏幕
          justifyContent: "center",
          width: "100%",
          alignItems: "center",
 
        }}
      >
        <Text
        style={{color: "white"}}
          className={`text-3xl font-bold mb-4 ${
            colorScheme === "dark" ? "text-white" : "text-black"
          }`}
        >
          故宫古树名木信息管理系统
        </Text>
        <Button
          onPress={() => setShowWelcomeScreen(false)} // 隐藏欢迎页
          className="color-white"
        >
            进入程序
        </Button>
        <Text
          className={`text-base mb-3 ${
            colorScheme === "dark" ? "text-white" : "text-black"
          }`}
        >
          故宫博物院修缮艺技部
        </Text>
        </ImageBackground>
      </View>
    );
  }

  // 主程序逻辑
  return (
    <Provider store={store}>
      <RootLayoutNav />
    </Provider>
  );
}

function RootLayoutNav() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen
        name="modal"
        options={{ title: "自定义标题1", presentation: "modal" }}
      />
      <Stack.Screen name="sub/subpage" options={{ title: "子页面标题" }} />
      <Stack.Screen name="pages/TreeCheck/TreeCheck" options={{ title: "古树巡检" }} />
      <Stack.Screen name="pages/CareManage/CareManage" options={{ title: "养护管理" }} />
      <Stack.Screen name="pages/camera" options={{ title: "测试" }} />



    </Stack>
  );
}
